<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>01 - OL4加载天地图WMTS服务展示地图</title>
    <script src="../lib/ol4/ol4.js"></script>
    <script src="../lib/proj4/proj4.js"></script>
    <link rel="stylesheet" href="../css/ol4/ol.css">
    <link rel="stylesheet" href="../css/main.css">
</head>
<body>
<div id="map"></div>
</body>
<script>
    const projection = ol.proj.get('EPSG:4326');
    projection.setExtent([-90, -180, 90, 180]);
    const tileSize = 256;
    const projectionExtent = projection.getExtent();
    const origins = [
        [-180.0, 90.0],
        ol.extent.getTopLeft(projectionExtent)
    ];
    // const origin = origins[1];
    const origin = [-180, 90];

    console.log(origin);
    console.log(projectionExtent);
    const size = ol.extent.getWidth(projectionExtent) / tileSize;
    console.log(size);
    const resolutions = new Array(22);
    const matrixIds = new Array(22);
    for (let z = 0; z < 22; ++z) {
        resolutions[z] = size / Math.pow(2, z);
        matrixIds[z] = z;
    }

    console.log(resolutions.toString());

    const tileGrid = new ol.tilegrid.WMTS({
        origin,
        resolutions: resolutions,
        extent: projectionExtent,
        matrixIds: matrixIds
    });
    const url = `http://10.116.44.236:8082/imserver/gwc/service/wmts`;

    const wmtsSource = new ol.source.WMTS({
        url,
        layer: 'yulin:yulin',
        matrixSet: 'EPSG:4326',
        format: 'image/png',
        projection: projection,
        tileGrid: tileGrid,
        style: 'raster',
        wrapX: false,
        tileLoadFunction: function (imageTile, src) {
            // console.log(src);
            imageTile.getImage().src = src.replace('TileMatrix=', 'TileMatrix=EPSG4%3A326%3A');
        }
    });
    // 图层
    const baseLayer = new ol.layer.Tile({
        source: wmtsSource
    });

    // const circlePoint = ol.proj.transform([116.384722, 39.889916], 'EPSG:4326', 'EPSG:4490');
    const points = [
        [0, 0],
        [110.998735, 30.818967],
        [116.384722, 39.889916],
        [119.97154785156252, 30.40197483062744]
    ];
    const centerPoint = [109.893818, 38.15189];


    const map = new ol.Map({
        layers: [
            baseLayer
        ],
        target: 'map',
        view: new ol.View({
            center: centerPoint,
            projection,
            zoom: 15,
            maxZoom: 21,
            minZoom: 1,
            resolutions
        })
    });
</script>
</html>